<template>
    <div class="main-box">
        <div class="search-box">
            <Form :model="searchData" ref="search" :label-width="60" inline>
                <FormItem label="时间" prop="month">
                    <DatePicker v-model="searchData.month" format="yyyy-MM" type="month" :clearable="false" @on-change="getData()"></DatePicker>
                </FormItem>
                <FormItem :label-width="20">
                    <Button type="default" @click="toReset()">重置</Button>
                    <Button type="primary" @click="getData()">搜索</Button>
                    <Button type="success" @click="toExport()">导出</Button>
                </FormItem>
            </Form>
        </div>
        <div class="table-box">
            <vxe-table ref="table" :data="tableData" align="center" border height="100%" :loading="loading">
                <vxe-column field="member_name" title="姓名" minWidth="100" fixed="left"></vxe-column>
                <vxe-colgroup title="自拓保费">
                    <vxe-column field="total_rb_car_sale_cn" title="人保轿运(国内)" minWidth="120"></vxe-column>
                    <vxe-column field="total_rb_car_sale_gj" title="人保轿运(国际)" minWidth="120"></vxe-column>
                    <vxe-column field="total_tb_car_sale" title="太保轿运" minWidth="120"></vxe-column>
                    <vxe-column field="total_car_sale" title="合计" minWidth="120"></vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="维护保费">
                    <vxe-column field="total_rb_car_maintenance_cn" title="人保轿运(国内)" minWidth="120"></vxe-column>
                    <vxe-column field="total_rb_car_maintenance_gj" title="人保轿运(国际)" minWidth="120"></vxe-column>
                    <vxe-column field="total_tb_car_maintenance" title="太保轿运" minWidth="120"></vxe-column>
                    <vxe-column field="total_car_maintenance" title="合计" minWidth="120"></vxe-column>
                </vxe-colgroup>
                <vxe-colgroup title="普货">
                    <vxe-column field="total_ordinary_sale" title="自拓" minWidth="120"></vxe-column>
                    <vxe-column field="total_ordinary_maintenance" title="维护" minWidth="120"></vxe-column>
                    <vxe-column field="total_ordinary" title="合计" minWidth="120"></vxe-column>
                </vxe-colgroup>
            </vxe-table>
        </div>
    </div>
</template>
<script>
import api from "@/api";
export default {
    name: "premium_salesman",
    data() {
        return {
            searchData: {
                month: this.$moment().subtract(1, "months").format("YYYY-MM"),
            },
            tableData: [],
            loading: false,
        };
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            this.getData();
        },
        getData() {
            this.loading = true;
            api.getSalesmanPremiumList({
                ...this.searchData,
                month: this.$moment(this.searchData.month).format("YYYY-MM"),
            })
                .then((res) => {
                    this.tableData = res;
                })
                .finally((res) => {
                    this.loading = false;
                });
        },
        toReset() {
            this.$refs.search.resetFields();
            this.search();
        },
        toExport() {
            let close_msg = this.$Message.loading({
                content: "正在导出...",
                duration: 0,
            });
            api.getSalesmanPremiumList({
                ...this.searchData,
                export: 1,
                month: this.$moment(this.searchData.month).format("YYYY-MM"),
            }).then((res) => {
                const link = document.createElement("a");
                link.href = res.download_url;
                link.setAttribute("download", res.download_name);
                document.body.appendChild(link);
                link.click();
                close_msg();
            });
        },
    },
};
</script>
<style scoped lang="less">
.main-box {
    .table-box {
        height: calc(100vh - 200px);
    }
}
</style>
